<template>
  <div>
    <!-- 房间列表 -->
    <el-row type="flex" justify="spance-betteen" class="add-room">
      <!-- 搜索 -->
      <el-col :span="5" class="search">
        <el-select v-model="queryObj.roomtype" placeholder="请选择房型" @change="getRoomList" :disabled="falg">
          <el-option
          v-for="item in roomTypes"
          :value="item.id"
          :key="item.id"
          :label="item.value"
         />
        </el-select>
      </el-col>
       <el-col :span="5" class="search">
        <el-select v-model="queryObj.state" placeholder="请选择状态" @change="getRoomList"  :disabled="falg">
          <el-option
          v-show="item.id>0"
          v-for="item in roomsState"
          :value="item.id"
          :key="item.id"
          :label="item.value"
         />
        </el-select>
      </el-col>
      <!-- 按照房间号查询 -->
      <el-col :span="5" class="search">
          <el-input v-model="queryObj.num" @blur="getRoomList" placeholder="请输入房间号" :disabled="!falg"></el-input>
      </el-col>
      <!-- 切换查询方式 -->
      <el-col :span="3">
        <el-button type="success" @click="getRoomListtype">切换查询方式</el-button>
      </el-col>
      <!-- 添加房间 -->
      <el-col>
        <el-row type="flex" justify="end" >
          <el-col :span="5">
            <el-button type="primary" @click="showdialog=true">添加房间</el-button>
          </el-col>
          <el-col :span="5">
             <el-button type="success" @click="$router.push('/import')">批量导入</el-button>
          </el-col>
          <el-col :span="5">
             <el-button type="danger" @click="exportData">批量导出</el-button>
          </el-col>
        </el-row>
      </el-col>
      <!-- 导出 -->
    </el-row>
    <!-- 房间列表 -->
     <el-table border :data="roomList" >
       <el-table-column prop="num" label="房间号" align="center"/>
       <el-table-column prop="name" label="房间名" align="center"/>
       <el-table-column prop="type" label="房间类型" :formatter="formatType" align="center"/>
       <el-table-column prop="price" label="房价/天" align="center" />
       <el-table-column prop="state" label="房间状态" :formatter="formatState" align="center"/>
        <el-table-column label="操作" width="400px" align="center">

          <template v-slot="{row}">
            <el-button type="danger" @click="deleteRoom(row.id)">删除</el-button>
            <el-button type="warning" @click="repairRoom(row.id)">维修</el-button>
            <el-button type="info" @click="$router.push(`/roomMng/updateroom/${row.id}`)">修改</el-button>
            <el-button type="success" @click="setState(row.id)">状态设置</el-button>
          </template>
        </el-table-column>
     </el-table>
     <!-- 分页 -->
   
    <el-row type="flex"  style="margin-top:10px" justify="center" align="middle">
      <el-pagination
      :page-size="queryObj.pageSize"
      layout="sizes, prev, pager, next"
      :current-page="queryObj.page"
      :page-sizes="[3,5,10]"
      @size-change="sizeChange"
      @current-change="currentChange"
      :total="queryObj.total">
    </el-pagination>
    </el-row>
    <!-- 增加房间 -->
    <add-room :showdialog="showdialog" />
    <el-dialog :visible="showrepair" title="维修房间" @close="btnCancel">
      <el-form :model="repair" :rules="rules" ref="repairForm">
        <el-form-item label="维修费用" prop="expenditure">
          <el-input v-model.number="repair.expenditure" style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="维修原因" prop="reason">
          <el-input type="textarea" v-model="repair.reason" style="width:80%"></el-input>
        </el-form-item>
      </el-form>
       <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btnOK">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-col>
    </el-row>
    </el-dialog>
    <!-- 修改状态 -->
    <el-dialog title="修改状态" :visible="updatestate"  @close="cancelupdate">
        <!-- <el-checkbox-group v-model="roomState">
          <el-checkbox v-for="item in roomsState" :label="item.id" :key="item.id">{{item.value}}</el-checkbox>
        </el-checkbox-group> -->
          <el-radio-group v-model="roomState">
            <el-radio v-show="item.id>0" v-for="item in roomsState" :label="item.id" :key="item.id" >{{item.value}}</el-radio>
          </el-radio-group>
         <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
        <el-button type="primary" size="small" @click="btnsure">确定</el-button>
        <el-button size="small" @click="cancelupdate">取消</el-button>
      </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import addRoom from './components/add-room'
import {getRoomList,daleteRoom,repairRoom ,getroom} from '@/api/rooms'
import { addIncomePay } from '@/api/incomePay'
import Rooms from '@/utils/constant/rooms'
export default {
components:{
    addRoom
  },
data(){
  return {
    // 修改状态
    falg:false,
    roomState:null,
    updatestate: false,
    updatestateId:null,
    // 维修数据
    showrepair:false,
    repair:{
      expenditure:null,
      reason:null,
      repairId:null
    },
    rules:{
      expenditure:[
        { required: true, message: '请输入维修价格', trigger: 'blur' },
      { type: 'number', message: '请输入正确的价格', trigger: 'blur' }
      ],
      reason:[
        { required: true, message: '请填写房间基本信息', trigger: 'blur' }
      ]
    },
    roomList:[],
    roomTypes:Rooms.type,
    roomsState:Rooms.state,
    queryObj:{
      page:1,
      pageSize:5,
      total:0,
      roomtype:null,
      state:null,
      num:null,
    },
    showdialog:false
  }
},
created(){
  this.getRoomList()
  // console.log(this.roomsState);
  // console.log(this.roomTypes);
},
methods:{
  // 获取房间数据列表
  async getRoomList(){
  let queryObj={}
  let querytotal={}
    // 两个都没有
 if(this.queryObj.num){
   queryObj={_page:this.queryObj.page,_limit:this.queryObj.pageSize,num_like:this.queryObj.num}
    querytotal={num_like:this.queryObj.num}
 }else{
      // console.log(this.queryObj.roomtype,this.queryObj.state);
  if(!this.queryObj.roomtype&&!this.queryObj.state){
    queryObj={_page:this.queryObj.page,_limit:this.queryObj.pageSize}
    querytotal={}
  }else if(this.queryObj.roomtype&&!this.queryObj.state){
    // this.queryObj.roomtype有
    queryObj={_page:this.queryObj.page,_limit:this.queryObj.pageSize,type_like:this.queryObj.roomtype}
    querytotal={type_like:this.queryObj.roomtype}
  }else if(!this.queryObj.roomtype&&this.queryObj.state){
    // this.queryObj.state有
     queryObj={_page:this.queryObj.page,_limit:this.queryObj.pageSize,state_like:this.queryObj.state}
    querytotal={state_like:this.queryObj.state}
  }
  else{
    // 都有
     queryObj={_page:this.queryObj.page,_limit:this.queryObj.pageSize,type_like:this.queryObj.roomtype,state_like:this.queryObj.state}
    querytotal={type_like:this.queryObj.roomtype,state_like:this.queryObj.state}
  }
 }
   const data=await getRoomList(queryObj)
   const total=await getRoomList(querytotal)
  //  console.log(total.length);
  //  console.log(data);
  //  console.log(total);
   this.queryObj.total=total.length
   this.roomList=data
  //  this.roomState=data.state
  },
  // 处理房间类型
  formatType(row, column, cellValue, index){
    const obj=Rooms.type.filter(item=>item.id===cellValue-0)
    // console.log(obj);
    return obj?obj[0].value:'未知'
  },
  // 处理房间状态
  formatState(row, column, cellValue, index){
    const obj=Rooms.state.filter(item=>item.id===cellValue-0)
    // console.log(obj);
    return obj?obj[0].value:'未知'
  },
  // 删除房间
 async deleteRoom(id){
   await this.$confirm('确定删除')
   await daleteRoom(id)
   this.$message.success('删除房间成功')
   this.getRoomList()
  },
  // 分页
  currentChange(value){
    this.queryObj.page=value
    this.getRoomList()
  },
  sizeChange(value){
    this.queryObj.pageSize=value
    this.getRoomList()
  },
  // 维修房间
  repairRoom(id){
    this.showrepair=true
    this.repair.repairId=id
  },
 async btnOK(){
   await this.$refs.repairForm.validate()
    const roominfo=await getroom(this.repair.repairId)
    let expenditure= roominfo.repair&&roominfo.repair.expenditure?roominfo.repair.expenditure+this.repair.expenditure:this.repair.expenditure
    const putObject={...roominfo,state:4,repair:{expenditure:expenditure,reason:this.repair.reason,}}
  //  console.log(putObject);
    await repairRoom(putObject)
    await addIncomePay({payment:this.repair.expenditure,info:this.repair.reason,"roomNum":roominfo.num})
    this.$message.success('提交维修成功')
    this.getRoomList()
    this.btnCancel()
  },
  btnCancel(){
     this.$refs.repairForm.resetFields()
    this.showrepair=false
  },
  // 修改状态
 async setState(id){
   const {state}=await getroom(id)
   console.log(state);
   this.roomState=state
   this.updatestate=true
   this.updatestateId=id
  },
  // 确认更改
 async btnsure(){
  //  console.log(this.roomState);
  //  console.log(this.updatestateId);
  const roominfo=await getroom(this.updatestateId)
  const putObject={...roominfo,state:this.roomState}
  await repairRoom(putObject)
  this.$message.success('修改成功')
  this.getRoomList()
  this.cancelupdate()
  },
  // 取消修改状态
  cancelupdate(){
    this.updatestate=false
    this.roomState=[]
  },
  getRoomListtype(){
    this.queryObj.num=null
    this.queryObj.roomtype=null
    this.queryObj.state=null
    this.getRoomList()
    this.falg=!this.falg
  },
  exportData(){
    const headers={
        "房间号":"num",
        "房间名":"name",
        "价格":"price",
        "房间类型":"type",
        "状态":"state",
        "介绍":"baseinfo"
      }
        import('@/utils/Export2Excel').then(async excel => {
          // console.log(this.queryObj.total);
          // console.log(1);
        let queryObj={}
         if(this.queryObj.num){
             queryObj={num_like:this.queryObj.num}
         }else{
        if(!this.queryObj.roomtype&&!this.queryObj.state){
          queryObj={}
        }else if(this.queryObj.roomtype&&!this.queryObj.state){
        queryObj={type_like:this.queryObj.roomtype}
        }else if(!this.queryObj.roomtype&&this.queryObj.state){
       queryObj={state_like:this.queryObj.state}
      }
       else{
        queryObj={type_like:this.queryObj.roomtype,state_like:this.queryObj.state}
        }
      }
      // console.log(2);
        const rst = await getRoomList({
          _page: 1,
          _limit: this.queryObj.total,
          ...queryObj
        })
        // console.log(rst);
        // console.log(rst)
        const data = this.formatJson(headers, rst)
        // console.log(data)
        excel.export_json_to_excel({
          header: Object.keys(headers),
          data,
          filename: '房间信息表',
          autoWidth: true,
          bookType: 'xlsx',
        })
      })
},
 formatJson(headers, rows) {
      return rows.map(item => {
        return Object.keys(headers).map(key => {
          if(headers[key]==="type"){
            // console.log(item[headers[key]]);
            return  Rooms.type.find(obj=>obj.id===item[headers[key]]).value
          }else if(headers[key]==="state"){
            // console.log(key);
            // console.log(item);
            // console.log(item[headers[key]],"test");
            return  Rooms.state.find(obj=>obj.id===item[headers[key]]).value
          }else{
             return item[headers[key]]
          }
        })
      })
}
}
}
</script>

<style lang="scss" scoped>
.add-room{
  margin: 10px;
  .search{
    margin-right: 10px;
  }
}
</style>